<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>云南紫米科技</title>

    <script type="text/javascript" src="/static/js/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="/static/js/jquery.qrcode.min.js"></script>
    <script type="text/javascript" src="/static/js/jQuery.md5.js"></script>
    <link rel="stylesheet" href="/static/lib/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/lib/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/static/lib/layuiadmin/style/login.css" media="all">

    <style type="text/css">
        html {
            transition-duration: 1s;
            background-size: cover;
        }

        .login_dw {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
            background: rgba(255, 255, 255, 1.0);
        }

        .layadmin-user-login-header {
            background-color: #303838;
        }

        #msg {
            color: #F00;
            text-align: center;
            display: none;
        }
    </style>
</head>
<body>
<div id="login">
    <form id="form">
        <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="padding: 200px 0;">
            <div class="layadmin-user-login-main login_dw"><!-- style="width: 435px;"-->
                <div class="layadmin-user-login-box layadmin-user-login-header">
                    <img src="/public/images/logo.png" width="60" style="margin-bottom: 10px;">
                    <h2 style="margin-bottom: 0;color: #FAFAFA">云南紫米科技</h2>
                </div>
                <div id="msg"></div>
                <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
                    <!--style="width: 75%;margin: 0 auto;"-->
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="username"></label>
                        <input name="username" id='username' class=" layui-input" required="true"
                               placeholder="请输入用户名/手机号/邮箱"/>

                    </div>
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="username"></label>
                        <input name="password" id='password' class=" layui-input" required="true" placeholder="请输入密码"
                               type="password"/>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-row">
                            <div class="layui-col-xs8">
                                <label class="layadmin-user-login-icon layui-icon layui-icon-vercode"
                                       for="captcha"></label>
                                <input id="captcha" name="captcha" class="  layui-input" required="true"
                                       placeholder="请输入验证码"/>

                            </div>
                            <div class="layui-col-xs4">
                                <div style="margin-left: 10px;">
                                    <img id="captcha_image" style="cursor:pointer;height:38px;width:100px;"
                                         src="/captcha/code" onclick="this.src='/captcha/code?s='+Math.random()"
                                         border=0 alt="点击重新获取" title="点击重新获取"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" style="margin-bottom: 20px;">
                        <input type="checkbox" name="remember" lay-skin="primary" id="remember_checkbox" title="记住密码">
                    </div>
                    <div class="layui-form-item">
                        <button id="login_button" name="login_button" class="layui-btn layui-btn-normal layui-btn-fluid"
                                onClick="login();return false;">登录
                        </button>
                    </div>
                    <div id="output"></div>
                    <a class="layui-hide-xs" href="/reset-password/page1" style="color:#1E9FFF">找回密码</a>
                    <a class="layadmin-user-jump-change layui-hide-xs" href="/registry/page1"
                       style="color:#1E9FFF">注册帐号</a>
                </div>
            </div>
        </div>
    </form>
</div>

<script src="/static/js/browser.min.js" type="text/javascript"></script>
<script src="/static/lib/layuiadmin/layui/layui.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        if (window !== top) top.location.href = location.href;
    });

    function login() {
        const data = $("form").serialize();
        const refurbish = function (msg) {
            $('#captcha_image').trigger('click');
            $('#msg').css("display", "block").html(msg);
        };
        let home = location.href.substring(0, location.href.lastIndexOf('/'));
        $.ajax({
            url: '/login',
            data: data,
            type: 'post',
            success: res => {
                if (200 === res.code) location.href = home;
                else if (401 === res.code) refurbish('用户验证失败');
                else if (402 === res.code) refurbish('验证码验证失败');
                else refurbish('登录验证验证失败');
            }
        });
    }

    let n = 0;
    const img = () => {
        if (n > 2) n = 0;
        $('html').css('background-image', `url(public/images/backgrounds/${++n}.jpg)`);
    };
    setInterval(img, 3000)
</script>

</body>
</html>